<template>
  <view class="verification-supervision-page">
    <!-- 导航栏 -->
    <view class="navbar">
      <image 
        class="icon-image" 
        src="/static/icons/arrow-left.svg" 
        mode="aspectFit" 
        @click="goBack"
      />
      <text class="navbar-title">核验行为监督</text>
      <view class="navbar-right"></view>
    </view>

    <!-- 统计概览区域 -->
    <view class="stats-section">
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-value">{{ statsData.totalVerifications }}</text>
          <text class="stat-label">总核验数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ statsData.passedVerifications }}</text>
          <text class="stat-label">通过核验</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ statsData.failedVerifications }}</text>
          <text class="stat-label">未通过核验</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ statsData.passRate }}%</text>
          <text class="stat-label">通过率</text>
        </view>
      </view>
    </view>

    <!-- 筛选区域 -->
    <view class="filter-section">
      <view class="filter-row">
        <view class="filter-item">
          <text class="filter-label">核验结果:</text>
          <picker 
            :value="selectedResultIndex" 
            :range="verificationResults" 
            @change="onResultChange"
            class="filter-picker"
          >
            <view class="picker-display">
              <text>{{ verificationResults[selectedResultIndex] }}</text>
              <image class="arrow-icon" src="/static/icons/arrow-down.svg" mode="aspectFit" />
            </view>
          </picker>
        </view>
        <view class="filter-item">
          <text class="filter-label">核验类型:</text>
          <picker 
            :value="selectedTypeIndex" 
            :range="verificationTypes" 
            @change="onTypeChange"
            class="filter-picker"
          >
            <view class="picker-display">
              <text>{{ verificationTypes[selectedTypeIndex] }}</text>
              <image class="arrow-icon" src="/static/icons/arrow-down.svg" mode="aspectFit" />
            </view>
          </picker>
        </view>
      </view>
      
      <view class="search-row">
        <view class="search-input-wrapper">
          <up-input 
            class="search-input" 
            placeholder="请输入人员姓名" 
            v-model="searchName"
            @input="onSearchInput"
          />
          <image class="search-icon" src="/static/icons/search.svg" mode="aspectFit" />
        </view>
      </view>
      <view class="button-row">
        <up-button class="query-btn" @click="queryVerifications">
          <image class="icon-image-small" src="/static/icons/search.svg" mode="aspectFit" />
          <text>查询</text>
        </up-button>
        <up-button class="refresh-btn" @click="refreshData">
          <image class="icon-image-small" src="/static/icons/reload.svg" mode="aspectFit" />
          <text>刷新</text>
        </up-button>
      </view>
    </view>

    <!-- 核验记录列表 -->
    <view class="verification-content">
      <view class="verification-list">
        <view 
          v-for="(item, index) in filteredVerifications" 
          :key="index" 
          class="verification-item"
          @click="viewDetail(item)"
        >
          <view class="verification-header">
            <view class="staff-info">
              <text class="staff-name">{{ item.staffName }}</text>
              <text class="staff-id">工号: {{ item.staffId }}</text>
            </view>
            <view class="verification-status" :class="getStatusClass(item.result)">
              <text>{{ item.result }}</text>
            </view>
          </view>
          
          <view class="verification-details">
            <view class="detail-row">
              <text class="detail-label">核验类型:</text>
              <text class="detail-value">{{ item.verificationType }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">核验时间:</text>
              <text class="detail-value">{{ item.verificationTime }}</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">核验地点:</text>
              <text class="detail-value">{{ item.location }}</text>
            </view>
            <view class="detail-row" v-if="item.remark">
              <text class="detail-label">备注:</text>
              <text class="detail-value">{{ item.remark }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-if="filteredVerifications.length === 0 && !loading" class="empty-state">
        <image class="empty-icon" src="/static/icons/inbox.svg" mode="aspectFit" />
        <text class="empty-text">暂无核验记录</text>
      </view>
      
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-state">
        <text>加载中...</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const loading = ref(false)
const searchName = ref('')
const selectedResultIndex = ref(0)
const selectedTypeIndex = ref(0)

// 筛选选项
const verificationResults = ['全部', '通过', '未通过', '待核验']
const verificationTypes = ['全部', '身份核验', '车辆核验', '证件核验', '现场核验']

// 统计数据
const statsData = ref({
  totalVerifications: 0,
  passedVerifications: 0,
  failedVerifications: 0,
  passRate: 0
})

// 核验记录数据
const verificationRecords = ref([])

// 模拟数据
const mockVerificationData = [
  {
    staffName: '张三',
    staffId: 'ST001',
    verificationType: '身份核验',
    result: '通过',
    verificationTime: '2024-01-15 09:30:00',
    location: '停车场A区',
    remark: '核验顺利'
  },
  {
    staffName: '李四',
    staffId: 'ST002',
    verificationType: '车辆核验',
    result: '未通过',
    verificationTime: '2024-01-15 10:15:00',
    location: '停车场B区',
    remark: '车牌号不符'
  },
  {
    staffName: '王五',
    staffId: 'ST003',
    verificationType: '证件核验',
    result: '通过',
    verificationTime: '2024-01-15 11:00:00',
    location: '停车场C区',
    remark: ''
  },
  {
    staffName: '赵六',
    staffId: 'ST004',
    verificationType: '现场核验',
    result: '待核验',
    verificationTime: '2024-01-15 11:30:00',
    location: '停车场D区',
    remark: '等待现场确认'
  },
  {
    staffName: '钱七',
    staffId: 'ST005',
    verificationType: '身份核验',
    result: '通过',
    verificationTime: '2024-01-15 14:20:00',
    location: '停车场A区',
    remark: ''
  },
  {
    staffName: '孙八',
    staffId: 'ST006',
    verificationType: '车辆核验',
    result: '未通过',
    verificationTime: '2024-01-15 15:45:00',
    location: '停车场B区',
    remark: '车辆信息不匹配'
  }
]

// 计算过滤后的核验记录
const filteredVerifications = computed(() => {
  let filtered = verificationRecords.value
  
  // 按核验结果筛选
  if (selectedResultIndex.value > 0) {
    const selectedResult = verificationResults[selectedResultIndex.value]
    filtered = filtered.filter(item => item.result === selectedResult)
  }
  
  // 按核验类型筛选
  if (selectedTypeIndex.value > 0) {
    const selectedType = verificationTypes[selectedTypeIndex.value]
    filtered = filtered.filter(item => item.verificationType === selectedType)
  }
  
  // 按人员姓名搜索
  if (searchName.value.trim()) {
    filtered = filtered.filter(item => 
      item.staffName.includes(searchName.value.trim())
    )
  }
  
  return filtered
})

// 事件处理
const goBack = () => {
  uni.navigateBack()
}

const onResultChange = (e) => {
  selectedResultIndex.value = e.detail.value
}

const onTypeChange = (e) => {
  selectedTypeIndex.value = e.detail.value
}

const onSearchInput = (e) => {
  searchName.value = e.detail.value
}

const queryVerifications = () => {
  loadVerificationData()
}

const refreshData = () => {
  // 重置筛选条件
  selectedResultIndex.value = 0
  selectedTypeIndex.value = 0
  searchName.value = ''
  loadVerificationData()
}

const viewDetail = (item) => {
  uni.showModal({
    title: '核验详情',
    content: `人员: ${item.staffName}\n类型: ${item.verificationType}\n结果: ${item.result}\n时间: ${item.verificationTime}\n地点: ${item.location}${item.remark ? '\n备注: ' + item.remark : ''}`,
    showCancel: false
  })
}

const getStatusClass = (result) => {
  switch (result) {
    case '通过':
      return 'status-passed'
    case '未通过':
      return 'status-failed'
    case '待核验':
      return 'status-pending'
    default:
      return ''
  }
}

// 数据加载
const loadVerificationData = async () => {
  loading.value = true
  
  try {
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 使用模拟数据
    verificationRecords.value = [...mockVerificationData]
    
    // 计算统计数据
    calculateStats()
  } catch (error) {
    console.error('加载核验数据失败:', error)
    uni.showToast({
      title: '加载失败',
      icon: 'error'
    })
  } finally {
    loading.value = false
  }
}

const calculateStats = () => {
  const total = verificationRecords.value.length
  const passed = verificationRecords.value.filter(item => item.result === '通过').length
  const failed = verificationRecords.value.filter(item => item.result === '未通过').length
  
  statsData.value = {
    totalVerifications: total,
    passedVerifications: passed,
    failedVerifications: failed,
    passRate: total > 0 ? Math.round((passed / total) * 100) : 0
  }
}

// 生命周期
onMounted(() => {
  loadVerificationData()
})
</script>

<style lang="scss" scoped>
.verification-supervision-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .icon-image {
    width: 40rpx;
    height: 40rpx;
  }
  
  .navbar-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
  
  .navbar-right {
    width: 40rpx;
  }
}

.stats-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30rpx;
    
    .stat-item {
      text-align: center;
      
      .stat-value {
        display: block;
        font-size: 48rpx;
        font-weight: 600;
        color: #1890ff;
        margin-bottom: 10rpx;
      }
      
      .stat-label {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}

.filter-section {
  background-color: #fff;
  margin: 0 20rpx 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .filter-row {
    display: flex;
    gap: 30rpx;
    margin-bottom: 30rpx;
    
    .filter-item {
      flex: 1;
      
      .filter-label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .filter-picker {
        .picker-display {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20rpx;
          background-color: #f8f9fa;
          border-radius: 8rpx;
          border: 1rpx solid #e9ecef;
          
          text {
            font-size: 28rpx;
            color: #333;
          }
          
          .arrow-icon {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }
    }
  }
  
  .search-row {
    display: flex;
    align-items: center;
    gap: 20rpx;
    margin-bottom: 20rpx;
    
    .search-input-wrapper {
      flex: 1;
      position: relative;
      
      .search-input {
        width: 100%;
        padding: 20rpx 50rpx 20rpx 20rpx;
        background-color: #f8f9fa;
        border-radius: 8rpx;
        border: 1rpx solid #e9ecef;
        font-size: 28rpx;
      }
      
      .search-icon {
        position: absolute;
        right: 15rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  
  .button-row {
    display: flex;
    gap: 20rpx;
    margin-bottom: 20rpx;
    
    .query-btn, .refresh-btn {
      display: flex;
      align-items: center;
      gap: 10rpx;
      padding: 20rpx 30rpx;
      border-radius: 8rpx;
      font-size: 28rpx;
      flex: 1;
      justify-content: center;
      
      .icon-image-small {
        width: 28rpx;
        height: 28rpx;
      }
    }
    
    .query-btn {
      background-color: #1890ff;
      color: #fff;
    }
    
    .refresh-btn {
      background-color: #52c41a;
      color: #fff;
    }
    
    .refresh-btn {
      background-color: #52c41a;
      color: #fff;
    }
  }
}

.verification-content {
  margin: 0 20rpx;
  
  .verification-list {
    .verification-item {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      
      .verification-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20rpx;
        
        .staff-info {
          .staff-name {
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
            display: block;
            margin-bottom: 8rpx;
          }
          
          .staff-id {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .verification-status {
          padding: 8rpx 16rpx;
          border-radius: 20rpx;
          font-size: 24rpx;
          
          &.status-passed {
            background-color: #f6ffed;
            color: #52c41a;
            border: 1rpx solid #b7eb8f;
          }
          
          &.status-failed {
            background-color: #fff2f0;
            color: #ff4d4f;
            border: 1rpx solid #ffccc7;
          }
          
          &.status-pending {
            background-color: #fff7e6;
            color: #fa8c16;
            border: 1rpx solid #ffd591;
          }
        }
      }
      
      .verification-details {
        .detail-row {
          display: flex;
          margin-bottom: 12rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .detail-label {
            font-size: 28rpx;
            color: #666;
            width: 160rpx;
            flex-shrink: 0;
          }
          
          .detail-value {
            font-size: 28rpx;
            color: #333;
            flex: 1;
          }
        }
      }
    }
  }
  
  .empty-state {
    text-align: center;
    padding: 100rpx 0;
    
    .empty-icon {
      width: 120rpx;
      height: 120rpx;
      margin-bottom: 30rpx;
      opacity: 0.3;
    }
    
    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .loading-state {
    text-align: center;
    padding: 60rpx 0;
    font-size: 28rpx;
    color: #999;
  }
}
</style>